<template>
  <div class="legal-layout">
    <Header />
    <div class="legal-container">
      <div class="legal-sidebar">
        <h3 class="sidebar-title">法律条款</h3>
        <el-menu
          :default-active="activeMenu"
          router
        >
          <el-menu-item index="/legal/agreement">
            <el-icon><Document /></el-icon>
            <span>用户协议</span>
          </el-menu-item>
          <el-menu-item index="/legal/privacy">
            <el-icon><Lock /></el-icon>
            <span>隐私政策</span>
          </el-menu-item>
        </el-menu>
        <div class="contact-info">
          <h4>联系我们</h4>
          <p>
            <el-icon><Message /></el-icon>
            <span>客服邮箱：support@bmark.cn</span>
          </p>
          <p>
            <el-icon><Phone /></el-icon>
            <span>服务热线：400-000-0000</span>
          </p>
          <p>
            <el-icon><Clock /></el-icon>
            <span>工作时间：周一至周五 9:00-18:00</span>
          </p>
        </div>
      </div>
      <div class="legal-content">
        <router-view></router-view>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import { defineComponent, computed } from 'vue';
import { useRoute } from 'vue-router';
import { Document, Lock, Message, Phone, Clock } from '@element-plus/icons-vue';
import Header from '@/components/Header.vue';
import Footer from '@/components/Footer.vue';

export default defineComponent({
  name: 'LegalLayout',
  components: {
    Header,
    Footer,
    Document,
    Lock,
    Message,
    Phone,
    Clock
  },
  setup() {
    const route = useRoute();
    const activeMenu = computed(() => route.path);

    return {
      activeMenu
    };
  }
});
</script>

<style scoped lang="scss">
.legal-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.legal-container {
  flex: 1;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: $spacing-extra-large;
  max-width: $container-width;
  margin: $spacing-extra-large auto;
  padding: 0 $spacing-base;
}

.legal-sidebar {
  .sidebar-title {
    font-size: $font-size-large;
    color: $text-primary;
    margin-bottom: $spacing-base;
    padding: 0 $spacing-base;
  }

  :deep(.el-menu) {
    border-right: none;
    margin-bottom: $spacing-extra-large;
  }

  :deep(.el-menu-item) {
    &.is-active {
      background-color: var(--el-color-primary-light-9);
    }

    .el-icon {
      margin-right: $spacing-small;
    }
  }
}

.contact-info {
  padding: $spacing-large;
  background-color: $background-color-base;
  border-radius: $border-radius-base;

  h4 {
    font-size: $font-size-base;
    color: $text-primary;
    margin-bottom: $spacing-base;
  }

  p {
    display: flex;
    align-items: center;
    gap: $spacing-small;
    color: $text-regular;
    margin-bottom: $spacing-small;
    font-size: $font-size-small;

    .el-icon {
      color: $text-secondary;
    }
  }
}

.legal-content {
  background-color: $background-color-white;
  border-radius: $border-radius-base;
  box-shadow: $box-shadow-light;
}

@media screen and (max-width: 1024px) {
  .legal-container {
    padding: 0 $spacing-large;
  }
}

@media screen and (max-width: 768px) {
  .legal-container {
    grid-template-columns: 1fr;
    padding: 0 $spacing-base;
  }

  .legal-sidebar {
    .sidebar-title {
      display: none;
    }

    :deep(.el-menu) {
      display: flex;
      margin-bottom: $spacing-base;
    }

    :deep(.el-menu-item) {
      flex: 1;
      display: flex;
      justify-content: center;
      padding: 0;

      .el-icon {
        margin-right: $spacing-mini;
      }
    }

    .contact-info {
      display: none;
    }
  }
}

@media screen and (max-width: 480px) {
  .legal-container {
    margin: $spacing-base;
  }

  :deep(.el-menu-item) {
    padding: 0 $spacing-small;
  }
}
</style> 